<style>
    .article-h-scroller-container {
        width: 100%;
        background-color: white;
        /*margin-bottom: 10px;*/
    }

    .article-h-scroller-item {
        display: inline-block;
        width: 80px;
        padding: 10px 5px;
    }

    .article-h-scroller-item > img {
        width: 100%;
        margin: 0 auto;
        display: block;
    }
</style>

<template>
    <div class="article-carousel" v-if="type === 'big'">
        <swiper :list="wall" height="200px" auto dots-position="center" style="width:100%" :interval="1000">
        </swiper>
    </div>
    <div class="article-h-scroller" v-if="type === 'small'" >
        <scroller lock-y :scrollbar-x="true" v-ref:scroller >
            <div class="article-h-scroller-container" :style="{width: h_width}" >
                <a class="article-h-scroller-item" v-for="item in wall">
                    <img :src="item.img" />
                </a>
            </div>
        </scroller>
    </div>
</template>

<script>
    import Swiper from 'vux-components/Swiper'
    import SwiperItem from 'vux-components/Swiper-item'
    import Scroller from 'vux-components/Scroller'
    import Vue from 'vue'

    export default {
        props: ['item'],
        data: () => ({wall: [], h_width: 0, type: 'big'}),
        events: {
            'text-input-change': function() {
                this.refresh_wall();
            }
        },
        components: {
            Swiper,
            SwiperItem,
            Scroller
        },
        methods: {
            refresh_wall() {
                let model_id;
                if (this.item.record && this.item.record.model_id > 0) {
                    model_id = this.item.record.model_id;
                } else if (this.item.value) {
                    model_id = JSON.parse(this.item.value).model_id;
                } else {
                    return;
                }

                $.when($.get('/editor/wall/get_desc', {wall_id: model_id})).then((results) => {
                    results = JSON.parse(results);
                    this.wall = results.wall;
                    this.type = results.type;

                    if (this.type === 'small') {
                        this.h_width = `${this.wall.length * 90 + 20}px`;
                        Vue.nextTick(() => {
                            this.$refs.scroller.reset();
                        });
                    }
                });
            },
        },
        ready: function() {
            this.refresh_wall();
        }
    }
</script>
